<template>
    <el-main>
        <el-row :gutter="20">
            <el-col :span="12">
                <el-card class="box-card">
                    <template #header>
                        <div class="card-header">
                            <span>公告栏</span>
                        </div>
                    </template>
                    <div v-for="o in 4" :key="o" class="text item">{{ 'List item ' + o }}</div>
                </el-card>
            </el-col>
            <el-col :span="12">
                <el-card class="box-card">
                    <template #header>
                        <div class="card-header">
                            <span>最新资讯</span>
                        </div>
                    </template>
                    <div v-for="o in 4" :key="o" class="text item">{{ 'List item ' + o }}</div>
                </el-card>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24">
                <el-card class="box-card">
                    <template #header>
                        <div class="card-header">
                            <span>说明</span>
                        </div>
                    </template>
                    <div class="sm">
                        <p>宙斯系统v1版</p>
                        <p>后台基于vue3 + Vite + TypeScript + Pinia + element-plus开发</p>
                        <p>图片和视频存储使用七牛云</p>
                        <p>文本编辑器使用wangeditor5</p>
                    </div>
                </el-card>
            </el-col>
        </el-row>
    </el-main>
</template>

<script setup lang='ts'>
import { ref, reactive } from 'vue'

</script>

<style scoped lang='scss'>
.el-row {
    margin-bottom: 20px;

    .item {
        margin-bottom: 18px;
    }
}

.sm {
    p {
        line-height: 2rem;
    }
}
</style>